<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商城</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/base.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/detail.css">
	<link rel="stylesheet" type="text/css" href="__STATIC__/index/font-awesome/css/font-awesome.min.css">

	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="__STATIC__/index/js/data.js"></script>

	<script type="text/javascript" src="__STATIC__/index/js/base.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/detail.js"></script>
    <script type="text/javascript" src="__STATIC__/index/js/top.js"></script>
	
	<script type="text/javascript">
		
		
	</script>
</head>
<body>
	<!-- 头部区域 -->
	<div class="top">
		<div class="top-content">
			<ul>
				
				<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>会员中心</a></li>
				<li><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i>购物车</a></li>
				<li><a href="#"><i class="fa fa-heart" aria-hidden="true"></i>收藏</a></li>				
				<li><a href="#"><i class="fa fa-share" aria-hidden="true"></i>结账</a></li>

			</ul>
		</div>
	</div>

	<!-- logo和购物车区域 -->
	<div class="logo-cart clearfix">
		<div class="logo">
			<img src="__STATIC__/index/image/logo3.png" align="败家商城">
		</div>
		<div class="cart" id="cart">
			<a href="#" class="cart-header">
				<span class="cart-img">
					<i class="fa fa-shopping-cart"></i>
				</span>		
				<span class="cart-info">&nbsp;&nbsp;0&nbsp;&nbsp;&nbsp;个商品&nbsp;&nbsp;&nbsp;-￥0.00</span>			
			</a>
			 <ul id="minicart-content" class="cart-content">
                <li>
                    <table id="minicart-content-table" class="table">
                        <tr>
                            <td class="text-right"><strong>冰箱</strong></td>
                            <td class="text-right" id="minicart-total-price">￥0</td>
                        </tr>
                        <tr>
                            <td class="text-right"><strong>彩电</strong></td>
                            <td class="text-right" id="minicart-total-price">￥0</td>
                        </tr>
                        <tr>
                            <td class="text-right"><strong>洗衣机</strong></td>
                            <td class="text-right" id="minicart-total-price">￥0</td>
                        </tr>
                    </table>
                </li>
                <li>
                    <div>
                        <table class="table">
                            <tr>
                                <td class="text-right"><strong>商品总额</strong></td>
                                <td class="text-right" id="minicart-total-price">￥0</td>
                            </tr>
                        </table>
                        <p class="todo">
                            <a href="{:url('/html/cart')}">
                                <strong><i class="fa fa-shopping-cart"></i>
                                    查看购物车</strong>
                            </a>
                            &nbsp;&nbsp;&nbsp;
                            <a href="{:url('checkout')}">
                                <strong><i class="fa fa-share"></i>
                                    去结账</strong>
                            </a>
                        </p>
                    </div>
                </li>
            </ul>
		</div>
	</div>
	<!-- 	导航区域 -->
	<div class="nav">
        <div class="nav-content clearfix">
            <div class="nav-menu">
                 <ul>
                    <li class="pattern"><a href="home.html">首页
                    </a>
                    </li>
                    <li  class="width-sub-menu pattern">
                        <a href="#">家用电器</a>
                        <ul class="sub-menu">
                            <li><a href="category.html">电视</a></li>
                            <li><a href="category.html">冰箱</a></li>
                            <li><a href="category.html">空调</a></li>
                            <li><a href="category.html">饮水机</a></li>
                        </ul>
                    </li>
                    <li  class="width-sub-menu pattern">
                        <a href="#">电脑办公</a>
                        <ul class="sub-menu">
                            <li><a href="category.html">笔记本</a></li>
                            <li><a href="category.html">打印机</a></li>
                            <li><a href="category.html">台式机</a></li>
                            <li><a href="category.html">电脑桌</a></li>
                        </ul>
                    </li>
                    <li  class="width-sub-menu pattern">
                        <a href="#">家居</a>
                        <ul class="sub-menu">
                            <li><a href="category.html">床</a></li>
                            <li><a href="category.html">沙发</a></li>
                            <li><a href="category.html">茶几</a></li>
                            <li><a href="category.html">衣柜</a></li>
                        </ul>
                    </li>
                    <li  class="width-sub-menu pattern">
                        <a href="#">美妆</a>
                        <ul class="sub-menu">
                            <li><a href="category.html">口红</a></li>
                            <li><a href="category.html">眼影</a></li>
                            <li><a href="category.html">假发</a></li>
                            <li><a href="category.html">防晒霜</a></li>
                        </ul>
                    </li>
                    <li  class="width-sub-menu pattern">
                        <a href="#">图书</a>
                        <ul class="sub-menu">
                            <li><a href="category.html">古典文学</a></li>
                            <li><a href="category.html">现代文学</a></li>
                            <li><a href="category.html">诺奖获奖作品</a></li>
                            <li><a href="category.html">中学教材</a></li>
                            <li><a href="category.html">小学教材</a></li>
                        </ul>
                    </li>
                 </ul>
            </div>
            <div class="nav-search">
                <div class="search-box">
                    <form action="" method="post">
                    <input type="text" name="" class="search-text" placeholder="搜索">
                    <button>
                        <i class="fa fa-search"></i>
                    </button>
                </form> 
                </div>              
            </div>
    </div>
    </div>
	
	<!-- 商品基本信息展示 -->
    <div class="product-info clearfix">
        <!-- 商品图片展示 -->
        <div class="product-image">
            <!-- 大图展示 -->
            <div class="big-image">
                <img src="__STATIC__/index/image/product/detail/img1.jpg" id="big-image">
            </div>
            <!-- 小图展示 -->
            <div class="small-image" id="small-image">
              <img src="__STATIC__/index/image/product/detail/small/img1.jpg">
              <img src="__STATIC__/index/image/product/detail/small/img2.jpg">
              <img src="__STATIC__/index/image/product/detail/small/img3.jpg">
              <img src="__STATIC__/index/image/product/detail/small/img4.jpg">
              <img src="__STATIC__/index/image/product/detail/small/img5.jpg">
            </div>
        </div>
        <!-- 商品基本信息介绍 -->
        <div class="product-base">
            <!-- 商品名称 -->
            <p class="product-name">{$product_info.title}</p>
            <!-- 商品价格 -->
            <div class="product-price">
                <p class="old-price"><span class="old-price-label">专柜价</span><span class="old-price-price">￥{$product_info.price_origin}</span></p>
                <p class="new-price"><span class="new-price-label">促销价</span><span class="unit">￥</span><span class="new-price-price">{$product_info.price}</span></p>
            </div>
            <!-- 选择购买数量 -->
            <div class="buy-count">
                <span class="count-label">数量</span>
                <div class="count-info">
                    <input type="text" name="" id="input-count" class="input-count" value="1">
                    <div class="count">
                        <span data-id="add">
                            <i class="fa fa-angle-up" aria-hidden="true"></i>
                        </span>
                        <span data-id="cut">
                            <i class="fa fa-angle-down" aria-hidden="true"></i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="product-go">
                <a class="product-go-buy" href="#">立即购买</a>
                <a class="product-go-cart" href="#">
                    <strong>
                        <i class="fa fa-shopping-cart"></i>
                        加入购物车
                    </strong>
                </a>                
            </div>
        </div>
    </div>

    <!-- 商品详情和规格参数 -->
    <div class="product-main">
        <!-- 列表切换 -->
        <ul class="list-tab clearfix">
            <li class="tab-detail active" id="tab-detail" data-target="product-detail">商品详情</li>
            <li class="tab-attribute" id="tab-attribute" data-target="product-attribute">规格参数</li>
        </ul>
       <!--  商品详情 -->
        <div class="product-detail">
           {foreach $photos as $item}
            <img src="{$item.img_url}" alt="">
            {/foreach}
        </div>
        <div class="product-attribute clearfix">
            <div class="attribute">
                <p>
                    <span>证书编号</span>
                    <span>2016011609909288</span>
                </p>
                <p>
                    <span>3C规格型号</span>
                    <span>M17、M17_A、M17_B、M1</span>
                </p>
                <p>
                    <span>保修期</span>
                    <span>12个月</span>
                </p>
                <p>
                    <span>架构类型</span>
                    <span>A53</span>
                </p>
                <p>
                    <span>运行内存RAM</span>
                    <span>1GB</span>
                </p>
            </div>
            <div class="attribute">
                 <p>
                    <span>证书状态</span>
                    <span>有效</span>
                </p>
                <p>
                    <span>产品名称</span>
                    <span>天猫魔盒 M18_A</span>
                </p>
                <p>
                    <span>内存容量(ROM)</span>
                    <span>8GB</span>
                </p>
                <p>
                    <span>架构类型</span>
                    <span>A53</span>
                </p>
                <p>
                    <span>运行内存RAM</span>
                    <span>1GB</span>
                </p>
            </div>
             <div class="attribute">
                 <p>
                    <span>证书状态</span>
                    <span>有效</span>
                </p>
                <p>
                    <span>产品名称</span>
                    <span>天猫魔盒 M18_A</span>
                </p>
                <p>
                    <span>内存容量(ROM)</span>
                    <span>8GB</span>
                </p>
                <p>
                    <span>架构类型</span>
                    <span>A53</span>
                </p>
                <p>
                    <span>运行内存RAM</span>
                    <span>1GB</span>
                </p>
            </div>
        </div>
    </div>
    <!-- 回到顶部 -->
	<div id="goToTop">
        <a href="#" class="scroll-top" style="display: block;">
            <i class="fa fa-angle-up"></i><br/>
            TOP
        </a>
    </div>     
</body>
</html>
